<script setup lang="ts">
import { MenuFoldOne, MenuUnfoldOne, Refresh, SettingTwo } from '@icon-park/vue-next';

import AppSettings from '@/fierce/components/app-settings/index.vue';

interface PageHeaderProps {
  /**
   * 是否折叠
   */
  collapsed: boolean;
}

const props = defineProps<PageHeaderProps>();

const emit = defineEmits<{
  (e: 'update:collapsed', collapsed: boolean): void;
}>();

const collapsed = computed(() => props.collapsed);

const drawerSettings = shallowRef();

function openAppSettings() {
  const { handleOpen } = drawerSettings.value;
  handleOpen();
}
</script>

<template>
  <div>
    <div class="header">
      <!-- TODO 顶部菜单 -->

      <!-- 左侧菜单 -->
      <div class="header-left ">
        <!-- 菜单收起 -->
        <div class="header-trigger" @click="() => emit('update:collapsed', !collapsed)">
          <MenuFoldOne v-if="collapsed" theme="filled" size="28" fill="#333" :stroke-width="2" stroke-linecap="butt" />
          <MenuUnfoldOne v-else theme="filled" size="28" fill="#333" :stroke-width="2" stroke-linecap="butt" />
        </div>

        <!-- 刷新 -->
        <div class="header-trigger">
          <Refresh theme="filled" size="20" fill="#333" :stroke-width="3" stroke-linecap="butt" />
        </div>
        <!-- TODO 面包屑 -->
      </div>
      <div class="header-right">
        <!-- TODO 业务相关 -->
        <!-- 个人中心 -->
        <!-- 设置 -->
        <div class="mr-1 header-trigger" @click="openAppSettings">
          <SettingTwo theme="outline" size="24" fill="#333" :stroke-width="2" stroke-linecap="butt" />
        </div>
      </div>
    </div>

    <!-- 项目配置 -->
    <AppSettings ref="drawerSettings" />
  </div>
</template>

<style scoped lang="less">
@header-height: 64px;

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  height: @header-height;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: 11;

  &-left {
    display: flex;
    align-items: center;
  }

  &-trigger {
    display: flex;
    align-items: center;
    height: 64px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: auto;
    padding: 0 12px;
    &:hover {
      background: hsla(0, 0%, 100%, 0.08);
    }
    .i-icon {
      display: flex;
    }
  }
}
</style>
